<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table width="800px" height="200px" border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>20</td>
        <td>女</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>22</td>
        <td>男</td>
      </tr>
    </table>

    <script src="jquery.min.js"></script>

    <script>
      window.onload = function () {
        let odds = document.querySelectorAll("table tbody tr:nth-child(odd)");
        odds.forEach(function (item) {
          item.style.backgroundColor = "red";
        });

        let evens = document.querySelectorAll("table tbody tr:nth-child(even)");
        evens.forEach(function (item) {
          item.style.backgroundColor = "blue";
        });
      };

      //   $(function () {
      //     $("table tbody tr:odd").css("background-color", "red");
      //     $("table tbody tr:even").css("background-color", "blue");
      //   });
    </script>
  </body>
</html>
